<template>
	<div class="my-header" :class="classes">
		<div class="my-header__content">
			<my-icon v-if="icon" :icon="icon" :ElIcon="ElIcon" class="my-header__icon" />
			<slot name="title">{{ title }}</slot>
		</div>
		<div v-if="$slots.handle" class="my-header__handle">
			<slot name="handle"></slot>
		</div>
	</div>
</template>

<script setup name="MyHeader">
/**
 * 标题组件
 * @module components/my-header
 */

/**
 * 插槽
 * @member slots
 * @property {String} [title] 定义标题内容
 * @property {String} [handle] 定义操作功能区内容
 */
/**
 * 属性参数
 * @member props
 * @property {String} [title] 标题文本
 * @property {String} [icon] 标题文本左侧的图标
 * @property {Boolean} [ElIcon] 是否是 ElIcon 组件图标，默认为 true
 * @property {Boolean} [background] 是否显示背景
 * @property {String} [size] 显示尺寸，可选值：'', 'large', 'medium', 'small'
 * @property {String} [theme=default] 风格主题，可选值：'default','border-left','border-top','border-bottom','bg-icon','bg-down','bg-right'
 */
const props = defineProps({
		// 标题文字
		title: String,

		// 文字旁边的Icon
		icon: [String],

		ElIcon: {
			type: Boolean,
			default: true
		},

		// 是否是否显示背景
		background: Boolean,

		// 显示尺寸
		size: {
			type: String,
			default: '',
			validator(val) {
				return ['', 'large', 'medium', 'small'].includes(val);
			}
		},

		// 风格主题
		theme: {
			type: String,
			default: 'default',
			validator(val) {
				return ['default', 'border-left', 'border-top', 'border-bottom', 'bg-icon', 'bg-down', 'bg-right'].includes(val);
			}
		}
	}),
	classes = computed(() => [
		{
			[`my-header--${props.theme}`]: !!props.theme,
			'is-background': props.background,
			'my-header--border-top': props.theme === 'bg-icon',
			[`is-${props.size}`]: !!props.size
		}
	]);
</script>

<style scoped lang="scss">
@use 'sass:math';
$rem: 16px;

$large: 3.5 * $rem;
// 默尺寸
$default: 3 * $rem;
$medium: 2.5 * $rem;
$small: 2 * $rem;
$border-left-width: 0.3 * $rem;
$border-top-width: 0.2 * $rem;
$border-radius: 0.4 * $rem;

@mixin sizeCenter {
	@include when(large) {
		@include e(content) {
			line-height: calc($large - $border-top-width);
		}
	}

	@include when(medium) {
		@include e(content) {
			line-height: calc($medium - $border-top-width);
		}
	}

	@include when(small) {
		@include e(content) {
			line-height: calc($small - $border-top-width);
		}
	}
}

@mixin iconCenter {
	@include when(large) {
		@include e(icon) {
			height: calc($large - 0.8 * $rem);
			line-height: calc($large - 0.8 * $rem - $border-top-width);
		}

		@include e(content) {
			line-height: calc($large - 0.8 * $rem);
		}
	}

	@include when(medium) {
		@include e(icon) {
			height: calc($medium - 0.4 * $rem);
			line-height: calc($medium - 0.4 * $rem - $border-top-width);
		}

		@include e(content) {
			line-height: calc($medium - 0.4 * $rem);
		}
	}

	@include when(small) {
		@include e(icon) {
			height: calc($small - 0.3 * $rem);
			line-height: calc($small - 0.3 * $rem - $border-top-width);
		}

		@include e(content) {
			line-height: calc($small - 0.3 * $rem);
		}
	}
}

@mixin bg-down($name, $size, $offset) {
	$last: calc($size - $offset - $border-radius);
	$last3: math.ceil(calc($last / 3));

	@include when($name) {
		@include e(content) {
			height: calc($size - $offset);
			margin-left: $last3;
			line-height: calc($size - $offset);

			&::after {
				right: -$last3;
				border-color: var(--el-color-primary) transparent transparent transparent;
				border-width: $last $last3 0 0;
				transform: translateX(-1px);
			}

			&::before {
				left: -$last3;
				border-color: transparent var(--el-color-primary) transparent transparent;
				border-width: 0 $last3 $last 0;
				transform: translateX(1px);
			}
		}
	}
}

@mixin bg-right($name, $size, $offset) {
	$last: calc($size - $offset - $border-radius);
	$last3: math.ceil(calc($last / 3));

	@include when($name) {
		@include e(content) {
			top: $offset;
			height: calc($size - $offset);
			line-height: calc($size - $offset);

			&::after {
				right: -$last3;
				border-color: transparent transparent transparent var(--el-color-primary);
				border-width: $last 0 0 $last3;
			}
		}
	}
}

@include b(header) {
	position: relative;
	box-sizing: border-box;
	height: $default;
	font-size: var(--el-font-size-medium);
	color: var(--el-text-color-primary);

	@include m(border-left) {
		@include e(content) {
			border-left: $border-left-width solid var(--el-color-primary);
		}
	}

	@include m(border-top) {
		border-top: 1px solid var(--el-color-primary);

		@include e(content) {
			height: 100%;
			margin-top: -1px;
			line-height: calc($default - $border-top-width);
			border-top: $border-top-width solid var(--el-color-primary);
		}

		@include sizeCenter;
	}

	@include m(border-bottom) {
		border-bottom: 1px solid var(--el-color-primary);

		@include e(content) {
			height: 100%;
			line-height: calc($default - $border-top-width);
			border-bottom: $border-top-width solid var(--el-color-primary);
		}

		@include sizeCenter;
	}

	@include m(bg-icon) {
		@include e(content) {
			padding-left: 3.5 * $rem;
		}

		@include e(icon) {
			position: absolute;
			left: 0;
			box-sizing: content-box;
			display: inline-block;
			height: calc($default - 0.5 * $rem);
			padding: 0 0.5 * $rem;
			margin-left: 0.5 * $rem;
			line-height: calc($default - 0.5 * $rem - $border-top-width);
			color: var(--el-text-color-primary);
			background: var(--el-color-primary);
			border-radius: 0 0 1 * $rem 1 * $rem;
		}

		@include iconCenter;

		@include e(content) {
			line-height: calc($default - 0.5 * $rem);
			border-top: 0;
		}
	}

	@include m(bg-down) {
		border-top: 1px solid var(--el-color-primary);

		@include e(icon) {
			padding-left: 0;
			color: var(--el-text-color-primary);
		}

		@include e(content) {
			$last: calc($default - 0.8 * $rem - $border-radius);
			$last3: math.ceil(calc($last / 3));

			position: relative;
			top: 0;
			left: 1 * $rem;
			display: inline-block;
			height: $default - 0.8 * $rem;
			padding-left: 1 * $rem;
			margin-left: $last3;
			line-height: calc($default - 0.8 * $rem);
			color: var(--el-text-color-primary);
			background: var(--el-color-primary);
			border-radius: 0 0 $border-radius $border-radius;
			transform: none;

			&::after {
				position: absolute;
				top: 0;
				right: -$last3;
				display: inline-block;
				width: 0;
				height: 0;
				content: '';
				border-color: var(--el-color-primary) transparent transparent transparent;
				border-style: solid;
				border-width: $last $last3 0 0;
			}

			&::before {
				position: absolute;
				top: 0;
				left: -$last3;
				display: inline-block;
				width: 0;
				height: 0;
				content: '';
				border-color: transparent var(--el-color-primary) transparent transparent;
				border-style: solid;
				border-width: 0 $last3 $last 0;
			}
		}

		@include bg-down(large, $large, 1 * $rem);
		@include bg-down(medium, $medium, 0.6 * $rem);
		@include bg-down(small, $small, 0.4 * $rem);
	}

	@include m(bg-right) {
		border-bottom: 1px solid var(--el-color-primary);

		@include e(icon) {
			padding-left: 0;
			color: var(--el-text-color-primary);
		}

		@include e(content) {
			$last: calc($default - 0.8 * $rem - $border-radius);
			$last3: math.ceil(calc($last / 3));

			position: relative;
			top: 0.8 * $rem;
			left: 0;
			display: inline-block;
			height: calc($default - 0.8 * $rem);
			padding-left: 1 * $rem;
			line-height: calc($default - 0.8 * $rem);
			color: var(--el-text-color-primary);
			background: var(--el-color-primary);
			border-radius: 0 $border-radius 0 0;
			transform: none;

			&::after {
				position: absolute;
				right: -$last3;
				bottom: 0;
				display: inline-block;
				width: 0;
				height: 0;
				content: '';
				border-color: transparent transparent transparent var(--el-color-primary);
				border-style: solid;
				border-width: $last 0 0 $last3;
			}
		}

		@include bg-right(large, $large, 0.85 * $rem);
		@include bg-right(medium, $medium, 0.6 * $rem);
		@include bg-right(small, $small, 0.4 * $rem);
	}

	@include when(background) {
		background: var(--el-bg-color-page, var(--el-border-color-lighter));
	}

	@include when(large) {
		height: $large;
		font-size: var(--el-font-size-large);
	}

	@include when(medium) {
		height: $medium;
		font-size: var(--el-font-size-base);
	}

	@include when(small) {
		height: $small;
		font-size: var(--el-font-size-extra-small);
	}

	@include e(content) {
		position: absolute;
		top: 50%;
		left: 0;
		box-sizing: border-box;
		padding: 0 1 * $rem;
		line-height: 1.3em;
		transform: translateY(-50%);
	}

	@include e(icon) {
		padding-right: 0.5 * $rem;
		font-size: 1.5em;
		vertical-align: -24%;
		color: var(--el-color-primary);
	}

	@include e(handle) {
		position: absolute;
		top: 50%;
		right: 0;
		padding-right: 1 * $rem;
		line-height: 1.3em;
		color: var(--el-color-primary);
		transform: translateY(-50%);
	}
}
</style>
